<template>
  <div>
    <div class="big">
      <div class="centercenter">
        <div id="main"></div>
      </div>
      <!-- <div class="wenzi" v-if="show">
        <div class="wenzishang">选择正确</div>
        <div class="wenzixia">21人 67%</div>
      </div>
      <div class="wenzi2" v-if="show">
        <div class="wenzishang">选择错误</div>
        <div class="wenzixia">10人 33%</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Radar",
  data() {
    return {
      datas: [
        "龙纹",
        "莲花纹",
        "如意纹",
        "云纹",
        "波浪纹",
        "万字纹",
        "回纹",
        "鳞纹",
        "锁纹",
        "火纹",
      ],
      isshow: true,
      show: false,
      timer: "",
    };
  },

  mounted() {
    this.ec();
    this.timer = setTimeout(() => {
      this.show = true;
    }, 2800);
  },
  methods: {
    tijiao() {
      this.$message({
        message: "提交成功",
        type: "success",
      });
    },

    ec() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance,
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {},
        },
      };
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["白", "黑", "黄", "赤", "青"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["金", "木", "水", "火", "土"],
            axisLabel: {
              fontSize: 30,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              fontSize: 25,
            },
          },
        ],
        series: [
          {
            name: "白",
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390],
            label: {
              normal: {
                show: true,
                position: "insideBottom",
                formatter: "{c}", // 显示的总数
                textStyle: { color: "#000", fontSize: 15 },
              },
            },
          },
          {
            name: "黑",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290],
            label: {
              normal: {
                show: true,
                position: "insideBottom",
                formatter: "{c}", // 显示的总数
                textStyle: { color: "#000", fontSize: 15 },
              },
            },
          },
          {
            name: "黄",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "赤",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [98, 77, 101, 99, 40],
          },
          {
            name: "青",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [98, 77, 101, 99, 40],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.big {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  // width: 83vw; // 这里将会对整体进行大小处理，不要再多说，simple size size size size 也是必须的！！！！ 这个大小不是必须的！！！！ 如果不是必须的，可以自由选择！！！！ （这个大小也是可以自由选择的！！！！） 大小也是可以自由选择的！！！！ （这个大小也是可以自由选择的！！
  background-image: url(@/assets/images/bjt.jpg);
  background-size: 100% 100%;
  position: relative;
  .wenzi {
    position: absolute;
    right: 500px;
    bottom: 400px;
    .wenzishang {
      font-size: 32px;
    }
    .wenzixia {
      color: #9c2831;
      font-size: 45px;
    }
  }
  .wenzi2 {
    position: absolute;
    left: 500px;
    bottom: 400px;
    .wenzishang {
      font-size: 32px;
    }
    .wenzixia {
      color: #9c2831;
      font-size: 45px;
    }
  }
  .centercenter {
    width: 100%;
    height: 72%;
    // background-color: #fff;
    position: absolute;
    top: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    #main {
      width: 1600px;
      height: 100%;
      // margin-bottom: 6%;
      // background-color: #fff;
    }
  }
  .tupian {
    position: absolute;
    top: 72.5%;
    width: 1600px;
    margin-left: 8.3%;
    // background-color: #ccc;
    display: flex;
    .every {
      // display: flex;
      margin-left: 3.7%;
      // border: 1px solid #fff;
      .imgimgimg {
        width: 75px;
      }
    }
  }
}
</style>
